<template>
  <div class="qa-list">
    <el-dialog
      v-model="visible"
      :title="title"
      width="60%"
      destroy-on-close
    >
      <div v-loading="loading">
        <div v-if="qaList.length > 0">
          <!-- 热恋中的问答 -->
          <div v-if="inLoveQAList.length > 0" class="qa-scene">
            <h3 class="scene-title">
              <el-tag type="danger" effect="dark">热恋中的对话</el-tag>
            </h3>
            <div v-for="qa in inLoveQAList" :key="qa.id" class="qa-item">
              <div class="question">
                <el-tag size="small">问</el-tag>
                {{ qa.question }}
              </div>
              <div class="answer">
                <el-tag type="success" size="small">答</el-tag>
                {{ qa.answer }}
              </div>
            </div>
          </div>
          
          <!-- 追求中的问答 -->
          <div v-if="pursuingQAList.length > 0" class="qa-scene">
            <h3 class="scene-title">
              <el-tag type="warning" effect="dark">追求中的对话</el-tag>
            </h3>
            <div v-for="qa in pursuingQAList" :key="qa.id" class="qa-item">
              <div class="question">
                <el-tag size="small">问</el-tag>
                {{ qa.question }}
              </div>
              <div class="answer">
                <el-tag type="success" size="small">答</el-tag>
                {{ qa.answer }}
              </div>
            </div>
          </div>
        </div>
        <el-empty v-else description="暂无问答数据" />
      </div>
      
      <template #footer>
        <el-button @click="visible = false">关闭</el-button>
        <el-button 
          type="primary" 
          :loading="generating"
          @click="handleGenerate"
        >
          生成问答
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import type { ArticleQA } from '@/api/types'
import { generateArticleQA, getArticleQAList } from '@/api/analysis'
import { handleError } from '@/utils/error-handler'

const props = defineProps<{
  articleId: number
  modelValue: boolean
  title: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
}>()

const visible = ref(false)
const loading = ref(false)
const generating = ref(false)
const qaList = ref<ArticleQA[]>([])

watch(() => props.modelValue, (val) => {
  visible.value = val
})

watch(visible, (val) => {
  emit('update:modelValue', val)
  if (val) {
    loadQAList()
  }
})

async function loadQAList() {
  loading.value = true
  try {
    qaList.value = await getArticleQAList(props.articleId)
  } catch (error) {
    handleError(error)
  } finally {
    loading.value = false
  }
}

async function handleGenerate() {
  generating.value = true
  try {
    const response = await generateArticleQA(props.articleId)
    // 确保返回的是数组
    const newQAList = Array.isArray(response) ? response : []
    if (newQAList.length > 0) {
      qaList.value = [...newQAList, ...qaList.value]
      ElMessage.success('问答生成完成')
    } else {
      ElMessage.warning('未能生成有效的问答')
    }
  } catch (error) {
    handleError(error)
  } finally {
    generating.value = false
  }
}

// 计算属性：按场景分类的问答列表
const inLoveQAList = computed(() => 
  qaList.value.filter(qa => qa.sceneType === 'IN_LOVE')
)

const pursuingQAList = computed(() => 
  qaList.value.filter(qa => qa.sceneType === 'PURSUING')
)
</script>

<style scoped lang="scss">
.qa-item {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 4px;
  background: #f8f9fa;
  
  .question {
    margin-bottom: 10px;
    
    .el-tag {
      margin-right: 8px;
    }
  }
  
  .answer {
    color: #666;
    
    .el-tag {
      margin-right: 8px;
    }
  }
}

.qa-scene {
  margin-bottom: 30px;
  
  .scene-title {
    margin-bottom: 15px;
  }
}
</style> 